<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>购物车</title>
    <link rel="stylesheet" type="text/css" href="css/shopping-car.css">
    <link rel="stylesheet" type="text/css" href="https://at.alicdn.com/t/font_759899_9yt5yeq53w9.css">
    <script src="js/jquery-1.11.1.min.js"></script>
</head>
<body>
<div class="container">
    <div class="zc-topbars">
        <div class="zc-topbar">
            <div class="left">
                <span><a href="#">商城首页</a></span>
                <span>hi~欢迎来到Z商城,请<a href="login.html">登录</a></span>
                <span><a href="register.html">免费注册</a></span>
            </div>
            <div class="right">
                <ul>
                    <li><a href="#">我的订单</a></li>
                    <li><a href="#">买家中心</a><div class="buy"><a href="#">关注的店铺 30</a><a href="#">关注的商品 48</a></div></li>
                    <li><a href="#">购物车0件</a></li>
                    <li><a href="#">帮助中心</a></li>
                    <li><a href="#"><span class="iconfont icon-shouji"></span>手机商城</a><div class="scan"></div></li>
                    <li><a href="#">中关村在线</a></li>
                    <li><a href="#">招商合作</a></li>
                    <li><a href="#">联系客服</a><div class="phone"><span>13361615759</span></div></li>
                </ul>
            </div>
        </div>
    </div>
    <div class="header">
        <div class="wrapper-search">
            <div class="logo">
                <span class="logo">z</span>
                <span class="font">商城</span>
                <span class="url">www.zol.com</span>
            </div>
            <div class="car-nav">
                <span>加入购物车</span>
                <span>下订单</span>
                <span>去付款</span>
                <span>确认收货</span>
                <span>评价</span>
            </div>
        </div>
    </div>
    <div class="shop-car">
        <div class="form">
            <p><span class="little">购物车状态（1/30）</span></p>
            <p><span class="little">总计（不含运费）：</span>
                <span class="iconfont icon-renminbi red">199.0</span>
                <a href="#" class="button">去结算</a>
            </p>
            <div class="form-header">
                <ul>
                    <li><span class="little">所选商品</span></li>
                    <li><span class="little">单价(元)</span></li>
                    <li><span class="little">数量</span></li>
                    <li><span class="little">优惠</span></li>
                    <li><span class="little">小计(元)</span></li>
                    <li><span class="little">操作</span></li>
                </ul>
            </div>
            <div class="form-bar">
                <input type="radio"/>
                <span class="little">店铺: </span>
                <a href="#" class="css">甲骨龙旗舰店</a>
                <i class="iconfont icon-qq"></i>
                <i class="iconfont icon-anquan"></i>
            </div>
            <div class="goods-order">
                <ul>
                    <li>
                        <div class="goods-name">
                            <input type="checkbox"/>
                            <img src="images/海盗船游戏鼠标.jpg" style="width: 80px;height: 80px; border: 1px solid #ddd;" alt="">
                            <div class="goods-info">
                                <a href="#" class="css">美商海盗船（USCORSAIR）HARPOO 鱼叉 RGB 光学游戏鼠标 炫彩灯光</a>
                                <br>
                                <i class="iconfont icon-anquancopy"></i>
                                <br>
                                <span class="little">颜色: 鱼叉</span>
                                <br>
                                <span class="little">套装: 官方标配</span>
                            </div>
                        </div>
                    </li>
                    <li class="item"><span class="little">199</span></li>
                    <li class="item">
                        <div class="count">
                            <span id="sub">-</span>
                            <input type="text" value="1" id="numShow" />
                            <span id="add">+</span>
                        </div>
                    </li>
                    <li class="item">
                        <span class="little">--</span>
                    </li>
                    <li class="item"><span class="little red">199</span></li>
                    <li class="item">
                        <a href="#" class="css">移入收藏夹</a>
                        &nbsp;&nbsp;
                        <a href="#" class="css">删除</a>
                    </li>
                </ul>
            </div>
            <div class="form-footer">
                <p><span class="little">商品总价（不含运费）：</span>
                    <span class="iconfont icon-renminbi red">199.0</span>
                </p>
                <div class="order">
                    <div>
                        <a href="#" class="css">批量删除</a>
                    </div>
                    <div>
                        <a href="#" class="css"><< 继续购物</a>
                        <a href="#" class="button">去结算</a>
                    </div>
                </div>
            </div>
        </div>
        <div class="footer">
            <img src="images/foot.png" alt="">
        </div>
    </div>
</div>
</body>
</html>
<script>
    //        购物车的加减
    var t = $("#numShow");
    $("#add").click(function () {
        t.val(parseInt(t.val()) + 1);
        $("#sub").removeAttr("disabled");                 //当按加1时，解除$("#min")不可读状态
//            setTotal();
    });
    $("#sub").click(function () {
        if (parseInt(t.val()) > 1) {                     //判断数量值大于1时才可以减少
            t.val(parseInt(t.val()) - 1)
        } else {
            $("#sub").attr("disabled", "disabled")        //当$("#min")为1时，$("#min")不可读状态
        }
//            setTotal();
    });
</script>